<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch socket</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cxselect.min.js"></script>
    <style>
        body {
            background-color: #888888;
        }
    </style>

</head>
<body>
<div class="container">
    <br>
    <h2 class="text-center" style="color: white; font-size:35px; word-spacing: normal;">开关插座 预算单</h2> <br>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="">
                <form id="city" class="form form-inline text-center">
                    <div class="form-group  " style="">
                        <h3 class="text-center">数据录入</h3> <br>
                        <select id="province" class="province form-control col-md-4" data-value=""
                                data-first-title="--选择品牌--">
                            <option value="" selected> ---选择品牌---</option>
                        </select>
                        <select id="city1" class="city form-control col-md-4" data-value="" data-first-title="--选择系列--">
                            <option value="" selected> ---选择系列---</option>
                        </select>
                        <select id="area" class="area form-control col-md-4"
                                data-first-title="--选择名称--">
                            <option value="" selected> ---选择名称---</option>
                        </select>
                        <div class="input-group">
                            <input id="nam" type="text" class="form-control col-md-2" placeholder="数量">
                        </div>
                        <div class="input-group">
                            <input id="remark" type="text" class="form-control col-md-2" placeholder="单据备注">
                        </div>
                        <button id="add" class="btn btn-default">添加</button>
                        <button id="reset" class="btn btn-default">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <br>
    <div class="panel panel-default">
        <div class="panel-body">
            <table id="switch" class="table table-bordered">
                <h3 class="text-center">单据明细</h3> <br>
                <tr class="text-center">
                    <td style="color: red;font-size:17px;">总计</td>
                    <td></td>
                    <td></td>
                    <td style="color: red;font-size:17px;">数量:</td>
                    <td id="ee"></td>
                    <td style="color: red;font-size:17px;">金额:</td>
                    <td id="ff"></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="text-center">
                    <td>序号</td>
                    <td>产品品牌</td>
                    <td>产品系列</td>
                    <td>产品名称</td>
                    <td>数量</td>
                    <td>单价</td>
                    <td>金额</td>
                    <td>单据备注</td>
                    <td>
                        操作
                    </td>
                </tr>

            </table>
        </div>
    </div>


</div>
<script type="text/javascript">
    $(function () {

        var e ="";
        var f ="";
        var ee = "0";
        var ff = "0";
        var fff = 0;
        // 联动菜单
        $.cxSelect.defaults.url = "data/cityData.min.json";

        $('#city').cxSelect({
            selects: ['province', 'city', 'area'],
            emptyStyle: 'none'
        });

        $("#add").click(function () { //添加 并判断是否为整数
            var val = $("#nam").val();
            var vall = /^-?\d+$/;

            if (vall.test(val)) {
                if ($(".area ").val() == null || $(".area ").val() == "") {
                    alert("请选择产品名称")
                } else {
                    //alert("添加成功");
                    added();
                    $("input").val("");
                    $(".area ").val("");
                }
            } else {
                alert("请输入数字");
                $("#nam").val("");
            }
            //添加成功
            return false
        });

        $("#reset").click(function () { //重置

            $("select").val("");
            $("input").val("");


            return false;
            //$("#id").trigger("chosen:updated");

        });


        function added() {  //添加新数据
            findunit();
            $("<tr class='text-center biaoge'></tr>").append("<td>" + "1" + "</td>")
                .append("<td>" + $("#province").val() + "</td>")
                .append("<td>" + $("#city1").val() + "</td>")
                .append("<td>" + $("#area").val() + "</td>")
                .append("<td class='nam' >" + $("#nam").val() + "</td>")
                .append("<td class='unit' >" + e + "</td>")
                .append("<td class='sum'>" + f + "</td>")
                .append("<td>" + $("#remark").val() + "</td>")
                .append("<td><a href='#'>清除</a></td>")
                .appendTo("#switch")
                .find("a")
                .click(function () {
                    return removeTr(this)
                });
                ff=+ff+ +f;
                ee=+ee+ +$("#nam").val();
                //alert(ff);
                $("#ff").text(ff);
                $("#ee").text(ee);

            var len = $('#switch tr').length;
            for (var i = 1; i < len; i++) {
                $('#switch tr:eq(' + i + ') td:first').text(i - 1);
                $("#switch tr:eq(1) td:first").text("序号");
            }
        }

        function removeTr(aNoe) {  //删除行
            var $trNode = $(aNoe).parent().parent();
            var firm = confirm("确定删除这条信息吗？");
            if (firm) {

                $trNode.remove();
            }
            var len = $('#switch tr').length;
            for (var i = 1; i < len; i++) {
                $('#switch tr:eq(' + i + ') td:first').text(i - 1);
                $("#switch tr:eq(1) td:first").text("序号");
            }

            return false;
        }

        $("#switch a").click(function () {  // a 的 删除事件
            //alert("点击了删除按钮");
            removeTr(this);
            return false;
        })

        function findunit(abc) {  //查找单价   并计算赋值金额
            var $abcd=$(abc).parent();
            $.each(shuju, function (index, item) {
//                alert(item[0]);
//                alert($("#area").val());
                if (item[0] == $("#area").val()) {
                    //alert("找到了");
                    //alert($("#area").val());
                    console.log($("#unit").val());
                    e = item[1];
                    f = e*$("#nam").val();


                } else {
                }
            })



        }
        function sumaa() {  //求 金额总和
            alert($(".nam").length);
            $(".nam").each(function (index) {
                alert(index);
                alert($(".nam").text());
            })







        }
        $("#ee").text(ee);

        var shuju = [
            ['G01一位电视', 25.7],
            ['G01一位电脑', 27.3],
            ['G01电视电脑', 47.6],
            ['G01白板', 7.2],
            ['G01防溅盒', 13.5],
            ['JG11一开双控', 15.9],
            ['JG11双开双控', 23.8],
            ['JG11三开双控', 32.3],
            ['JG11四开双控', 40.2],
            ['JG11五孔', 17],
            ['JG1116A三孔', 19.7],
            ['JG11一开五孔', 31.2],
            ['JG11一位电视', 29.7],
            ['JG11一位电脑', 30.7],
            ['JG11电视电脑', 54.4],
            ['JG11白板', 11.5],
            ['JG19一开双控', 20.8],
            ['JG19双开双控', 32.1],
            ['JG19三开双控', 43.3],
            ['JG19四开双控', 54.1],
            ['JG19五孔', 22.7],
            ['JG1916A三孔', 27.8],
            ['JG19一开五孔', 41.3],
            ['JG19一位电视', 39.4],
            ['JG19一位电脑', 37.4],
            ['JG19一位电话', 31.2],
            ['JG19电视电脑', 70.3],
            ['JG19两位电脑', 70],
            ['JG19白板', 18.1],
            ['JG22一开双控', 28.7],
            ['JG22双开双控', 43],
            ['JG22三开双控', 58.3],
            ['JG22四开双控', 72.7],
            ['JG22五孔', 31.5],
            ['JG22一开五孔', 56.2],
            ['JG2216A三孔', 35.4],
            ['JG22一位电视', 46.8],
            ['JG22一位电脑', 48.4],
            ['JG22两位电脑', 87.5],
            ['JG22电视电脑', 85.8],
            ['JG22白板', 25.3],
            ['HG22一开双控', 28.7],
            ['HG22双开双控', 43],
            ['HG22三开双控', 58.3],
            ['HG22四开双控', 72.7],
            ['HG22五孔', 31.5],
            ['HG22一开五孔', 56.2],
            ['HG2216A三孔', 35.4],
            ['HG22一位电视', 46.8],
            ['HG22一位电脑', 48.4],
            ['HG22两位电脑', 87.5],
            ['HG22电视电脑', 85.8],
            ['HG22白板', 25.3],
            ['JG18白单开双控', 17.4],
            ['JG18白二开双控', 27.2],
            ['JG18白三开双控', 36.7],
            ['JG18白四开双控', 45.8],
            ['JG18白五孔', 18.5],
            ['JG18白16A ', 22.6],
            ['JG18白一开五孔双控', 34.1],
            ['JG18白电视', 33.4],
            ['JG18白电脑', 31.7],
            ['JG18金单开双控', 21.1],
            ['JG18金二开双控', 32.6],
            ['JG18金三开双控', 44],
            ['JG18金四开双控', 55],
            ['JG18金五孔', 22.3],
            ['JG18金16A ', 27.1],
            ['JG18金一开五孔双控', 40.9],
            ['JG18金电视', 40],
            ['JG18金电脑', 38],
            ['A7一开双控', 26],
            ['A7双开双控', 33],
            ['A7三开双控', 39],
            ['A7四开双控', 48],
            ['A7五孔', 24],
            ['A7一开五孔', 32],
            ['A716A三孔', 22.5],
            ['A716A一开三孔', 31],
            ['A7白板', 15],
            ['A7一位电视', 27],
            ['A7一位电话', 63],
            ['A7一位电脑', 106],
            ['A7两位电话', 106],
            ['A7两位电脑', 190],
            ['A7电视电话', 72],
            ['A7电视电脑', 115],
            ['A7电话电脑', 151],
            ['A7七孔', 27],
            ['A7报警开关', 52],
            ['A6一开双控', 18.5],
            ['A6双开双控', 25],
            ['A6三开双控', 32],
            ['A6四开双控', 38],
            ['A6五孔', 20],
            ['A6一开五孔', 26],
            ['A616A三孔', 20],
            ['A616A一开三孔', 27.5],
            ['A6白板', 10],
            ['A6一位电视', 20],
            ['A6一位电话', 52],
            ['A6一位电脑', 98],
            ['A6两位电话', 99],
            ['A6两位电脑', 185],
            ['A6电视电话', 63],
            ['A6电视电脑', 105],
            ['A6电话电脑', 138],
            ['A8一开双控', 29],
            ['A8双开双控', 35],
            ['A8三开双控', 42],
            ['A8四开双控', 49],
            ['A8五孔', 29],
            ['A8一开五孔', 36],
            ['A816A三孔', 29],
            ['A8白板', 18],
            ['A8一位电视', 30],
            ['A8一位电话', 62],
            ['A8一位电脑', 97],
            ['A8两位电话', 99],
            ['A8电视电话', 67],
            ['A8电视电脑', 101],
            ['A8电话电脑', 132],
            ['A9一开双控', 32],
            ['A9双开双控', 38],
            ['A9三开双控', 46],
            ['A9四开双控', 52],
            ['A9五孔', 32],
            ['A9一开五孔', 39],
            ['A916A三孔', 32],
            ['A9白板', 21],
            ['A9一位电视', 32],
            ['A9一位电话', 64],
            ['A9一位电脑', 101],
            ['A9两位电话', 101],
            ['A9电视电话', 70],
            ['A9电视电脑', 107],
            ['A9电话电脑', 138],
            ['企一防水盒', 11],
            ['大河29射灯', 29],
            ['中性光灯带', 22],
            ['灯带接头', 10],
            ['白光灯带', 22],
            ['明装五孔', 25],
            ['25A空开', 30],
            ['32A空开', 40],
            ['32A空开+漏保', 45],
            ['60A空开', 55],
            ['60A空开+漏保', 60],
            ['20截止阀', 60],
            ['25截止阀', 80],
            ['GN五孔地插', 178.1],
            ['GN阻尼五孔地插', 209],
            ['GN地插盒塑料', 25.5],
            ['企一4W射灯', 100],
            ['企一86射灯', 84],
            ['FH一开双控', 31],
            ['FH双开双控', 43],
            ['FH三开双控', 50],
            ['FH四开双控', 59],
            ['FH五孔', 35],
            ['FH一开五孔', 46],
            ['FH16A三孔', 40],
            ['FH白板', 21],
            ['FH一位电视', 38],
            ['FH一位电话', 37],
            ['FH一位电脑', 47],
            ['FT一开双控', 23],
            ['FT双开双控', 30],
            ['FT三开双控', 37],
            ['FT四开双控', 43],
            ['FT五孔', 23],
            ['FT一开五孔', 32],
            ['FT16A三孔', 26],
            ['FT白板', 12],
            ['FT一位电视', 26],
            ['FT一位电话', 23],
            ['FT一位电脑', 29],
            ['FS一开双控', 19],
            ['FS双开双控', 29],
            ['FS三开双控', 36],
            ['FS四开双控', 43],
            ['FS五孔', 21],
            ['FS一开五孔', 31],
            ['FS16A三孔', 23],
            ['FS白板', 13],
            ['FS一位电视', 26],
            ['FS一位电话', 22],
            ['FS一位电脑', 27],
            ['FY一开双控', 25],
            ['FY双开双控', 34],
            ['FY三开双控', 43],
            ['FY四开双控', 52],
            ['FY五孔', 26],
            ['FY一开五孔', 35],
            ['FY16A三孔', 28],
            ['FY白板', 14],
            ['FY一位电视', 29],
            ['FY一位电话', 26],
            ['FY一位电脑', 32]
        ]
    })

</script>


</body>
</html>